<template>
	<view class="order">
		<view class="topBox">
			<image :src="imaurl+'c9.png'" style="width: 100%;height: 334rpx;" mode=""></image>
			<view class="contentBox">
				<view class="navBox">
					个人中心
				</view>
				<view class="userInfo" @click="handleUerinfo">
					<view class="avatarBox">
						<image :src="userInfo.avatar" style="width: 160rpx;height: 160rpx;border-radius: 160rpx;"
							mode=""></image>
					</view>
					<view class="nikeName">
						<text>{{userInfo.nickname}}</text>
						<image v-if="userInfo.is_vip==1" :src="imaurl+'c10.png'"
							style="width: 40rpx;height: 40rpx;margin-left: 10rpx;" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="listBox">
			<view class="listItem" @click="handleUerinfo">
				<image :src="imaurl+'d1.png'" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					个人资料
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
			<view class="listItem" @click="handleMenber">
				<image :src="imaurl+'d2.png'" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					会员中心
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
			<view class="listItem" @click="handleOrder">
				<image src="../../../static/image/order2.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					我的订单
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
			<view class="listItem" @click="handleAbotUs">
				<image :src="imaurl+'d3.png'" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					关于我们
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
			<view class="listItem" @click="handleFeedback">
				<image :src="imaurl+'d4.png'" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="" style="margin-left: 20rpx;">
					意见反馈
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
			<view class="listItem" @click="handlevideo" style="padding-left: 33rpx;">
				<u-icon name="twitter" size="26"></u-icon>
				<view class="" style="margin-left: 20rpx;">
					视频探视
				</view>
				<image :src="imaurl+'b8.png'" style="width: 32rpx;height: 32rpx;margin-left: 452rpx;" mode="">
				</image>
			</view>
		</view>


		<view class="btns" @click="show = true">
			退出登录
		</view>

		<view class="" style="height: 50rpx;"></view>
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="cancel"></u-modal>

		<tabBar :value4="value4" @change4="change4" :list="tabList"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabbar.vue"

	import {
		tabList
	} from "@/static/dataList.js"
	import {
		MyIndex
	} from "@/api/api.js"
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				value4: 2,
				tabList,
				show: false,
				title: "您确定要退出登录吗？",
				userInfo: {},
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
			}
		},
		onShow() {
			this.handleMyIndex()
		},
		onLoad() {},
		methods: {
			change4(name) {
				this.value4 = name
				uni.reLaunch({
					url: this.tabList[name].path
				});
			},
			async handleMyIndex() {
				let res = await MyIndex()
				this.userInfo = res.data
			},
			handleUerinfo() {
				uni.navigateTo({
					url: `/pages/login/userInfo?flag=${true}`
				})
			},
			handleMenber() {
				uni.navigateTo({
					url: "./menberCenter"
				})
			},
			handleOrder() {
				uni.reLaunch({
					url: "/pages/client/order/index"
				})
			},
			handleAbotUs() {
				uni.navigateTo({
					url: "./aboutUs"
				})
			},
			handleFeedback() {
				uni.navigateTo({
					url: "./feedBack"
				})
			},
			confirm() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				this.show = false
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},
			handlevideo() {
				uni.navigateTo({
					url: "./video"
				})
			},
			cancel() {
				this.show = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.topBox {
		width: 100%;
		position: relative;

		.contentBox {
			position: absolute;
			top: 0;
			width: 100%;
			padding-top: 88rpx;
			box-sizing: border-box;

			.navBox {
				width: 100%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}

			.userInfo {
				width: 750rpx;
				height: 174rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				margin-top: 120rpx;
				position: relative;

				.avatarBox {
					position: absolute;
					top: -80rpx;
					left: 50%;
					margin-left: -80rpx;
				}

				.nikeName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 38rpx;
					padding-top: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;

				}
			}
		}
	}

	.listBox {
		width: 100%;
		margin-top: 160rpx;

		.listItem {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
			width: 750rpx;
			height: 144rpx;
			background: #FFFFFF;
			margin-bottom: 1rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
	}

	.btns {
		width: 630rpx;
		height: 88rpx;
		background: #EEEEEE;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 40rpx;

	}
</style>